<template>
  <view class="t-login">
    <!-- 页面装饰图片 -->
    <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png" />
    <image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png" />
    <!-- 标题 -->
    <view class="t-b">你好</view>
    <view class="t-b2">欢迎使用KK物业</view>
    <form class="cl">
      <up-radio-group
        v-model="radiovalue1"
        placement="row"
        style="margin-bottom: 10rpx"
      >
        <up-radio
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in radiolist1"
          :key="index"
          :label="item.name"
          :name="item.name"
          @change="radioChange"
        >
        </up-radio>
      </up-radio-group>
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/sj.png" />
        <view class="line"></view>
        <input type="number" placeholder="请输入手机号" v-model="phone" />
      </view>
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/yz.png" />
        <view class="line"></view>
        <input type="password" placeholder="请输入密码" v-model="password" />
      </view>
      <view class="t-a" v-if="!isLogin">
        <image
          src="https://tse1-mm.cn.bing.net/th/id/OIP-C.WLBmUVbjHEDVahoTWq-VyQHaHa?rs=1&pid=ImgDetMain"
        />
        <view class="line"></view>
        <input type="password" placeholder="请输入昵称" v-model="username" />
      </view>
      <button @click="registerf" v-if="!isLogin">注 册</button>
      <button @click="login" v-else>登 录</button>
    </form>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { loginR, register } from '@/api/login'

const isLogin = ref(true)
const phone = ref('')
const password = ref('')
const username = ref('')

const login = async () => {
  const res = await loginR({
    telephone: phone.value,
    password: password.value
  })
  uni.setStorageSync('token', res.data.token)
  uni.switchTab({
    url: '/pages/index/homePage'
  })
}

const registerf = async () => {
  const res = await register({
    username: username.value,
    password: password.value,
    telephone: phone.value
  })
  if (res) {
    uni.showToast({
      title: '注册成功',
      icon: 'none'
    })
    isLogin.value = true
  }
}

// 基本案列数据
const radiolist1 = reactive([
  {
    name: '登录',
    disabled: false
  },
  {
    name: '注册',
    disabled: false
  }
])

// up-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
const radiovalue1 = ref('登录')

const radioChange = (n: any) => {
  if (n === '登录') {
    isLogin.value = true
  } else {
    isLogin.value = false
  }
}
</script>

<style>
.img-a {
  position: absolute;
  width: 100%;
  top: -150rpx;
  right: 0;
}
.img-b {
  position: absolute;
  width: 50%;
  bottom: 0;
  left: -50rpx;
  /* margin-bottom: -200rpx; */
}
.t-login {
  width: 650rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
}
.t-login button {
  font-size: 28rpx;
  background: #fda261;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}
.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 50rpx;
  background: #f8f7fc;
  border: 1px solid #e9e9e9;
  font-size: 28rpx;
  border-radius: 50rpx;
}
.t-login .t-a {
  position: relative;
}
.t-login .t-a image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
  /* border-right: 2rpx solid #dedede; */
  margin-right: 20rpx;
}
.t-login .t-a .line {
  width: 2rpx;
  height: 40rpx;
  background-color: #dedede;
  position: absolute;
  top: 28rpx;
  left: 98rpx;
}
.t-login .t-b {
  text-align: left;
  font-size: 46rpx;
  color: #000;
  padding: 300rpx 0 30rpx 0;
  font-weight: bold;
}
.t-login .t-b2 {
  text-align: left;
  font-size: 32rpx;
  color: #aaaaaa;
  padding: 0rpx 0 120rpx 0;
}
.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #fda261;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
}
.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}
.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}
.t-login .t-g {
  float: left;
  width: 50%;
}
.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
}
.t-login .t-f {
  text-align: center;
  margin: 200rpx 0 0 0;
  color: #666;
}
.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}
.t-login .uni-input-placeholder {
  color: #000;
}
.cl {
  zoom: 1;
}
.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}
</style>
